@import "variables";
@import "mixins";
@import "src/styles/custome-var";
@import "~vuetify/src/styles/styles";

$--v-application: v-application;

// 字体
@font-face {
  font-family: "Open Sans";
  src: url(../../../assets/fonts/SourceSansPro-Regular.ttf) format('truetype');
}

//* ——— Origin Html Style Overrides ——————————————————
//

// #region Origin Html Style Overrides

p {
  line-height: 1.7;
}

// #endregion

//* ——— Change The font-* of content ——————————————————
//

// #region Change The font-* of content

@include theme(v-application) using($material) {
  color: map-deep-get($material, 'text', 'secondary') !important;
}

@include theme(v-card) using($material) {
  color: map-deep-get($material, 'text', 'secondary') !important;
}

@include theme(v-sheet) using($material) {
  @if $material == $material-dark {
    color: #fff !important;
  } @else  {
    color: map-deep-get($material, 'text', 'secondary') !important;
  }

  .v-card__title {
    color: map-deep-get($material, 'text', 'primary') !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: map-deep-get($material, 'text', 'primary') !important;
  }
}

// #endregion

//* ——— Color Or Font Overrides ——————————————————
//

// #region Color Or Font Overrides

.text--white, .text-white {
  @include text-color(white);
}

.text--black, .text-black {
  @include text-color(black);
}

.bg-white {
  @include background-color(white);
}

// #endregion


//* ——— Button Overrides ——————————————————
//

// #region Button Overrides

.default {
  color: #fff !important;
  background-color: rgb(23, 43, 77) !important;
  border-color: rgb(23, 43, 77) !important;
}

// v-btn--outlined
@each $colorName, $colorValue in $theme-colors {
  .v-application .v-btn.v-btn--outlined.#{$colorName}--text:hover {
    color: #ffffff !important;
    @include background-color($colorValue);
  }
}

@include theme($--v-application) using($type) {
  @if $type == $material-light {
    .v-btn:hover::before {
      opacity: 0;
    }

    .v-btn.secondary--text {
      @include text-color(#4385b1);

      &:hover {
        @include text-color(#000);
      }
    }
  }
}

// group

@include theme($--v-application) using($type) {
  .v-btn-toggle {
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08) !important;
  }

  // TODO 这应该是组件
  @if $type == $material-light {
    .v-btn-toggle > .v-btn {
      background-color: #f7fafc;
      border-color: #f7fafc;
    }

    .v-btn-toggle > .v-btn.v-btn--active {
      background-color: #d2e3ee;
      border-color: #d2e3ee;
    }
  }
}

// #endregion

//* ——— Card Overrides ——————————————————
//

// #region Card Overrides

.v-card {
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !important;

  .v-card__text {
    line-height: 1.5;
  }
}

// #endregion

//* ——— List of Menu Overrides ——————————————————
//

// #region List of Menu Overrides

$--menu-item-color: rgba(0, 0, 0, 0.87);

@include theme(v-list-item) using($type) {
  @if $type == $material-light {
    &:not(.v-list-item--active):not(.v-list-item--disabled) {
      color: rgba(0, 0, 0, 0.6);
    }
  }
}

@include hover(v-list-item) {
  color: $--menu-item-color !important;
}

.v-list-group__header.v-list-item.v-list-item--active {
  color: $--menu-item-color;
  background: #f6f9fc;
}

// #endregion

//* ——— Divider Overrides ——————————————————
//

// #region Divider Overrides

@include theme(v-divider) using($type) {
  @if $type == $material-light {
    border-color: rgba(0, 0, 0, 0.06);
  } @else {
    border-color: rgba(0, 0, 0, .05);
  }
}

// #endregion

//* ——— Color Overrides ——————————————————
//

// #region Color Overrides

@include theme(v-application) using($type) {
  @if $type == $material-light {
    .secondary {
      color: #212529;
    }
  }
}

// #endregion

//* ——— Alter Overrides ——————————————————
//

// #region Alter Overrides

@include theme($--v-application) using ($type) {
  .v-alert {
    &.secondary {
      .v-icon, .v-alert__content {
        color: #000;
      }
    }

    .v-icon {
      color: #fff;
    }
  }
}

// #endregion

//* ——— Form Overrides ——————————————————
//

// #region Form Overrides

@include theme($--v-application) using ($type) {
  @if $type == $material-light {
    .v-input {
      input, textarea {
        color: #8898aa !important;
      }
    }

    // 取消原本的颜色，并取消hover
    .v-text-field--outlined:not(.v-input--is-focused) .v-input__slot {
      fieldset {
        color: #dee2e6 !important;
      }

      &:hover fieldset {
        color: #dee2e6 !important;
      }
    }
  }
}

// #endregion

//* ——— Table Overrides ——————————————————
//

// #region Table Overrides
@include theme(v-data-table) using ($type) {
  table thead th {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .65rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;

  }

  // 修改border颜色
  & > .v-data-table__wrapper > table > tbody > tr {
    &:not(:last-child) > td {
      border-bottom: 1px solid #e9ecef !important;
    }

    td {
      padding-top: .5rem;
      padding-bottom: .5rem;
      background: #ffffff;
    }
  }

  // 修改border颜色
  & > .v-data-table__wrapper > table > thead > tr:last-child > th {
    border-bottom: 1px solid #e9ecef !important;
  }

  .v-data-footer {
    border: 0 !important;
  }

  @if $type == $material-light {
    // 修改字体颜色
    & > .v-data-table__wrapper tbody > tr {
      @extend .text-body;
    }

    // 修改头header背景颜色
    .v-data-table-header {
      background: #f6f9fc !important;
    }

    // 修改header字体颜色
    & > .v-data-table__wrapper > table > thead > tr > th {
      @extend .text-muted;
    }
  }
}

// #endregion
